<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>单向数据流-1</title>
	<style type="text/css">
		span{color:green;font-weight:bold;font-size: 30px;}
	</style>
</head>
<body>
	<div id="app">
		<my-component :count="count"></my-component>
	</div>
</body>
</html>
<script src="../../2.1.8/vue.js"></script>
<script>
	/*
		单向数据流
			父组件向子组件传递数据是单项的，一层层向下一子组件传递数据
			子组件不能改变父组件传来的数据值，即对父组件传来的数据直接修改
			例如：改变下面例子的 count, 直接修改会导致报错，不允许直接修改父组件数据
			1. 使用 props 接收父组件数据
			2. 通过组件 data 属性，接收父组件传来的数据，
				( 注意组件使用 data 函数 )，将父组件数据拷贝一份到子组件，避免影响原始数据。
			3. 然后对接收的数据进行操作
	*/
	// 全局组件
	Vue.component('my-component',{
		props : ['count'],
		data(){
			return {
				increaseCount : this.count 
			}
		},
		template : 
			`<div>
				<button v-on:click="changeCout">button</button>
				<h2>我是自定义组件<span> {{increaseCount}}</span></h2>
			</div>`,
		methods : {
			changeCout(){
				this.increaseCount ++;
			}
		}
	});
	var vm = new Vue({
			el : '#app',
			data : {
				count : 0
			},
		});
</script>